{% extends 'base/userinfo.html' %}


{% block head %}
<meta charset="utf-8">
<title>用户组管理 管理界面</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/asset/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/asset/css/global.css" media="all">
<script src="/asset/js/js-yaml.min.js"></script>
<script src="/asset/js/util.js" charset="utf-8"></script>

<style>
    .layui-body {
        left: 30px !important;
    }

    .e {
        height: 600px;
        min-width: 1000px;
        font-size: 14px;
    }

</style>

{% endblock %}

{% block body %}


<div id="box" style="display: none">
    <h1 class="site-h1"></h1>

    <form class="layui-form" action="" id="item-form">

        <div class="layui-form-item">
            <label class="layui-form-label">用户组名</label>

            <div class="layui-input-block">
                <input type="text" name="groupname" autocomplete="off" placeholder="" class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户组</label>

            <div class="layui-input-block">
                <input type="text" name="group" autocomplete="off" placeholder="" class="layui-input ">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <input type="checkbox" name="permission" value="dev" title="dev">
                <input type="checkbox" name="permission" value="testenv" title="testenv" checked="">
                <input type="checkbox" name="permission" value="prod" title="prod">
                <input type="checkbox" name="permission" value="template" title="template">
                <input type="checkbox" name="permission" value="global_template" title="global_template">
                <input type="checkbox" name="permission" value="salt" title="salt">
                <input type="checkbox" name="permission" value="system" title="system">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="demo1" id="submit_add">立即提交</button>
                </button>

            </div>
        </div>

    </form>
</div>

<div class="layui-body">

    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li><a href="/user/user.html">用户管理</a></li>
            <li class="layui-this"><a href="/user/usergroup.html">分组管理</a></li>

        </ul>
        <div class="layui-tab-content"></div>
    </div>


    <h1 class="site-h1">分组管理 </h1>
    <button id="create_item" class="layui-btn">新建分组</button>

    <table class="layui-table" lay-data="{ height: 'full', url:'/user/group_list', page:true, id:'idTest'}"
           lay-filter="demo">
        <thead>
        <tr>
            <th lay-data="{field:'groupname', sort: true, fixed: true}">分组名称</th>
            <th lay-data="{field:'group', sort: true, fixed: true}">分组</th>

            <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作</th>
        </tr>
        </thead>
    </table>

</div>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="template">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" lay-event="del">删除</a>
</script>


<script src="/asset/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['table', "form"], function () {
        var $ = layui.$

        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });


        //监听工具条
        table.on('tool(demo)', function (obj) {
            if (obj.event === 'del') {
                layer.confirm("确认删除用户", {
                    btn: ['确认', '取消']
                    , btn3: function (index, layero) {

                    }
                }, function (index, layero) {
                    del_item(obj.data)
                    obj.del();

                }, function (index) {

                })
            } else if (obj.event === 'template') {
                edit_item(obj.data)
            }
        });
        function del_item(data) {
            $.ajax({
                url: "/user/del_usergroup?username=" + data['username'],
                type: 'DELETE',
                contentType: 'application/json',
                data: JSON.stringify({}),
                success: function (data) {
                    layer.msg('删除成功');

//                    table.reload('idTest', {});
                    location.reload()
                },
                error: function (xhr, type) {
                    layer.msg('删除失败');
                }
            })
        }

        var index = null

        function edit_item(data) {
            index = layer.open({
                type: 1,
                title: '编辑分组',              // [可选]
                content: $('#box'),          // 对话框中的内容部分
                area: ['900px',],    // 对话框的大小 [可选]
                shadeClose: true,           // 为 true 时点击遮罩关闭 [可选]
            });
            render_form($("#item-form"), data)
            form.render()
        }

        $('#create_item').on('click', function () {
            index = layer.open({
                type: 1,
                title: '新建分组',              // [可选]
                content: $('#box'),          // 对话框中的内容部分
                area: ['900px',],    // 对话框的大小 [可选]
                shadeClose: true,           // 为 true 时点击遮罩关闭 [可选]
            });
            render_form($("#item-form"))
            form.render()

        });

        var form = layui.form

        //监听提交
        form.on('submit(demo1)', function (data) {
            data.field.permission = []
            $('input:checkbox:checked[name="permission"]').each(function () {
                data.field.permission.push($(this).val());
            });

            $.ajax({
                url: "/user/usergroup",
                type: "POST",
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                success: function (_data) {
                    console.log(_data)
                    if (_data.code != 0) {
                        layer.alert('提交失败!<br>' + _data.message, {
                            icon: 2,
                            skin: 'layer-ext-moon'
                        })
                        return false
                    }
                    layer.msg('更新成功');
                    layer.close(index)
//                    table.reload('idTest', {});
                    location.reload()
                },
                error: function (xhr, type) {
                    layer.msg("请求失败");
                }
            })

            return false;
        });


    });

    function render_form($form, row) {
        if (!row) {
            $form.find('input:not(checkbox)').val("");
            $form.find('select').val("");
            $form.find('textarea').val("");
            return
        }
        for (var name in row) {
            $form.find('input[name="' + name + '"]:not(checkbox)').val(row[name]);
            $form.find('select[name="' + name + '"]').val(row[name]);
            $form.find('textarea[name="' + name + '"]').val(row[name]);
        }

    }
</script>
{% endblock %}
